<template>
	<view class="container">
		<u-toast ref="uToast" />
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		<u-navbar :is-back="false" title="通讯录" back-icon-color='#333333' height="50" :border-bottom="false">
			<text class="iconfont icon-fanhuijian2" style="font-size:30rpx; margin-left:30rpx; font-weight:bold;"
				@click="previous_pages"></text>
			<view class="" style="margin-left: 600rpx; display: flex;align-content: center;">
				<image src="../../static/tupian95.png" mode="widthFix" style="width: 30rpx;"></image>
			</view>
		</u-navbar>
		<u-mask :show="display">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="tanchu">
						{{teacher_name}}
					</view>
					<view class="teacherPhone">
						{{teacher_phone}}
					</view>
					<view class="anniu">
						<view class="" @click="display=false">
							取消
						</view>
						<view class="" >
							确定
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<view class="top">
			<view class="topBox">
				<view v-for="(topItem,topIndex) of contacts" :key="topIndex" :data-name="topIndex" @click="changeIndex"
					:class="[activeIndex==topIndex?'con':'']">
					<text></text>
					{{topItem}}
				</view>
			</view>
		</view>
		<view class="school">
			<text>{{school_name}}</text>
			<text @click="show=true"></text>
		</view>
		<view class="" v-show="activeIndex==0">
			<view class="entire">
				<view class="">
					全部
				</view>
				<view class="" @click.stop="getAll" style="background:#fff;">
					<text>全选</text>
					<image src="../../static/tupian115.png" mode="widthFix" style="width:30rpx;" v-show="grade_entire">
					</image>
				</view>
			</view>
			<view class="grade_list">
				<view class="grade">
					<view class="" v-for="(item,index) in grades_arr" :key="index" @click="change_sub(index)"
						:id="[index==num?'sub':'']">
						{{item.label}}
					</view>
				</view>
				<view id="teacher">
					<view class="all_teacher" v-for="(i,j) in grades_arr[num].children" :key="j"
						@click="change_teacher(num,j)">
						<text>{{i.label}}</text>
						<image src="../../static/tupian115.png" mode="widthFix" style="width:30rpx;" v-show="i.boolen"
							@click.stop=" show_phone(i)">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-show="activeIndex==1">
			<view class="entire">
				<view class="">
					全部
				</view>
				<view class="" @click.stop="getAll" style="background:#fff;">
					<text>全选</text>
					<image src="../../static/tupian115.png" mode="widthFix" style="width:30rpx;"
						v-show="subject_entire">
					</image>
				</view>
			</view>
			<view class="grade_list">
				<view class="grade">
					<view class="" v-for="(item,index) in subject_arr" :key="index" @click="change_sub(index)"
						:id="[index==subject_num?'sub':'']">
						{{item.label}}
					</view>
				</view>
				<view id="teacher">
					<view class="all_teacher" v-for="(i,j) in subject_arr[subject_num].children" :key="j"
						@click="change_teacher(subject_num,j)">
						<text>{{i.label}}</text>
						<image src="../../static/tupian115.png" mode="widthFix" style="width:30rpx;" v-show="i.boolen"
							@click.stop=" show_phone(i)">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../request.js'
	export default {
		data() {
			return {
				activeIndex: 0,
				show: false,
				back_page: 1,
				contacts: ['部门', '学科'],
				grades_arr: [{
					children: [],
					value: "",
					label: '',
				}], //部门的老师列表
				subject_arr: [{
					children: [],
					value: "",
					label: '',
				}], //学科的老师列表
				school_name: '',
				school_list: [],
				uploadFile: [],
				teacher_name: '',
				teacher_phone: '',
				num: 0,
				subject_num: 0,
				grade_entire: false,
				subject_entire: false,
				display: false,
			}
		},
		onLoad(option) {
			if (option.id) {
				switch (option.id) {
					case 1:
						this.back_page = 1;
						break;
					case 2:
						this.back_page = 2;
						break;
					case 3:
						this.back_page = 3;
						break;
				}
			}
			this.schoolDistrictList();
			this.departmentLists();
			this.groupLists(); //获取的是学科的老师列表记住任何事情发生了你都要去想想这件事教会了我们什么
		},
		computed: {
			list() {
				if (this.school_list) {
					let arr = [];
					for (let i = 0; i < this.school_list.length; i++) {
						arr.push({
							value: this.school_list[i].school_district_id,
							label: this.school_list[i].name
						})
					}
					return arr;
				} else {
					return [];
				}
			}
		},
		methods: {
			changeIndex(e) {
				console.log(e.currentTarget.dataset.name);
				let index = e.currentTarget.dataset.name;
				this.activeIndex = index;
			},
			show_phone(param) {
				this.display = true;
				this.teacher_name = param.label; //这里获取的是老师的名称
				this.teacher_phone = param.value; //这里获取的是老师的电话号码

			},
			change_teacher(param1, param2) {
				switch (this.activeIndex) {
					case 0:
						this.grades_arr[param1].children[param2].boolen = !this.grades_arr[param1].children[param2]
							.boolen;
						break;
					case 1:
						this.subject_arr[param1].children[param2].boolen = !this.subject_arr[param1].children[param2]
							.boolen;
						break;
				}
			},
			confirm(e) {
				console.log(e);
				this.school_name = e[0].label;
			},
			//对返回上一级页面分情况跳转
			previous_pages() {
				switch (this.back_page) {
					case 1:
						this.$toLink('../career/career', {}, 3)
						break;
					case 2:
						uni.navigateBack({
							delta: 1
						})
						break;
					case 3:
						break;
				}
			},
			//获取的是校区列表
			schoolDistrictList() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/general/schoolDistrictList',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							_this.school_list = res.data.data;
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//获取的是部门的老师列表
			departmentLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({  //爱别人之前你最应该爱的那个人是你自己
					url: base_url + 'teacher/general/departmentLists',
					data: {
						school_district_id: 0,
					},
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							res.data.data.forEach((item, index) => {
								_this.grades_arr.push({
									label: item.department_name,
									value: item.department_id,
									children: []
								})
								_this.departmentTeacherLists(item.department_id, index);

							})
							//因为原有数组存在一个不需要的元素所以获取之后将第一个删除
							_this.grades_arr.shift();
							console.log(_this.grades_arr);

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//获取的是学科的老师列表
			groupLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/general/groupLists',
					data: {
						school_district_id: uni.getStorageSync('school_district_id'),
					},
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							res.data.data.forEach((item, index) => {
								_this.subject_arr.push({
									label: item.name,
									value: item.subject_id,
									children: []
								})
								_this.groupUserLists(item.subject_id, index);
							})
							//因为原有数组存在一个不需要的元素所以获取之后将第一个删除
							_this.subject_arr.shift();
							console.log(_this.subject_arr);

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//获取的是学科的老师的列表  1 2  14 17 18 20
			groupUserLists(param1, param2) {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/general/groupUserLists',
					data: {
						subject_id: param1
					},
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data.data);
							res.data.data.data.forEach(item => {
								_this.subject_arr[param2].children.push({
									label: item.teacher_info ? item.teacher_info.full_name : '',
									value: item.teacher_info ? item.teacher_info.phone : '',
									boolen: false,
								})
							})

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//获取到部门的老师列表
			departmentTeacherLists(param1, param2) {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/general/departmentTeacherLists',
					data: {
						department_id: param1
					},
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data.data);
							res.data.data.data.forEach(item => {
								_this.grades_arr[param2].children.push({
									label: item.full_name,
									value: item.phone,
									boolen: false,
								})
							})

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},

			getAll() {
				console.log('进来吗')
				switch (this.activeIndex) {
					case 0:
						this.grade_entire = !this.grade_entire;
						if (this.grade_entire) {
							for (let i = 0; i < this.grades_arr.length; i++) {
								for (let j = 0; j < this.grades_arr[i].children.length; j++) {
									this.grades_arr[i].children[j].boolen = true;
								}
							}
						} else {
							for (let i = 0; i < this.grades_arr.length; i++) {
								for (let j = 0; j < this.grades_arr[i].children.length; j++) {
									this.grades_arr[i].children[j].boolen = false;
								}
							}
						}
						break;
					case 1:
						this.subject_entire = !this.subject_entire;
						if (this.subject_entire) {
							for (let i = 0; i < this.subject_arr.length; i++) {
								for (let j = 0; j < this.subject_arr[i].children.length; j++) {
									this.subject_arr[i].children[j].boolen = true;
								}
							}
						} else {
							for (let i = 0; i < this.subject_arr.length; i++) {
								for (let j = 0; j < this.subject_arr[i].children.length; j++) {
									this.subject_arr[i].children[j].boolen = false;
								}
							}
						}
						break;
				}



			},
			change_sub(param) {
				switch (this.activeIndex) {
					case 0:
						this.num = param;
						break;
					case 1:
						this.subject_num = param;
						break;

				}
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		overflow: hidden;
		background: #F2F2F2;
		height: 100vh;

		.warp {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			height: 100%;

			.rect {
				margin-top: 450rpx;
				border-radius: 10rpx;
				width: 480rpx;
				height: 250rpx;
				background-color: #fff;

				.tanchu {
					width: 100%;
					height: 90rpx;
					font-size: 33rpx;
					color: #3E3E3E;
					text-align: center;
					line-height: 90rpx;
				}

				.teacherPhone {
					width: 100%;
					height: 50rpx;
					font-size: 33rpx;
					color: #3E3E3E;
					text-align: center;
					line-height: 50rpx;
				}

				.anniu {
					width: 100%;
					height: 110rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					view {
						border-radius: 30rpx;
						width: 150rpx;
						height: 60rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 26rpx;

						&:nth-child(1) {
							color: #2C78FE;
							margin-left: 15rpx;
							border: 1px solid #2C78FE;
							background: #fff;

						}

						&:nth-child(2) {
							color: #fff;
							margin-right: 15rpx;
							background: linear-gradient(to right, #2C78FE, #32B0FF);
						}


					}
				}
			}
		}

		.top {
			width: 100%;
			height: 95rpx;
			background: #fff;
			overflow: hidden;

			.topBox {
				width: 100%;
				margin-top: 30rpx;
				height: 65rpx;
				background: #fff;
				position: relative;
				display: flex;
				justify-content: space-evenly;

				view {
					height: 65rpx;
					line-height: 65rpx;
					width: 120rpx;
					text-align: center;
					font-size: 30rpx;
					color: #fff;
					color: #333333;

					text {
						display: none;
					}


				}

				.con {
					position: relative;
					height: 65rpx;
					line-height: 65rpx;
					color: #2f96fe;
					width: 120rpx;

					text {
						display: block !important;
						position: absolute;
						width: 120rpx;
						height: 4rpx;
						background: #2f96fe;
						bottom: 0rpx;
						left: 0rpx;
					}
				}

			}
		}

		.school {
			width: 100%;
			height: 74rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			text {
				&:nth-child(1) {
					color: #333333;
					font-size: 30rpx;
					width: 250rpx;
					text-align: right;
					margin-left: 30rpx;
				}

				&:nth-child(2) {
					width: 0rpx;
					margin-left: 20rpx;
					margin-top: 20rpx;
					height: 0rpx;
					border-width: 18rpx 18rpx 18rpx 18rpx;
					border-color: #ccc transparent transparent transparent;
					border-style: solid;
				}
			}
		}

		.entire {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			height: 79rpx;

			view {
				&:nth-child(1) {
					width: 226rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e5e5e5;
					border-right: 1rpx solid #e5e5e5;
					text-align: center;
					line-height: 79rpx;
					font-size: 30rpx;
					background: #F9F8F8;
					color: #666666;
				}

				&:nth-child(2) {
					width: 524rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e5e5e5;
					align-items: center;
					font-size: 26rpx;
					display: flex;
					justify-content: flex-start;
					color: #666666;

					text {
						&:nth-child(1) {
							margin-left: 26rpx;
							width: 400rpx;

						}

						&:nth-child(2) {
							margin-left: 50rpx;
						}
					}

				}
			}
		}

		.grade_list {
			width: 100%;
			display: flex;
			justify-content: flex-start;

			.grade {
				width: 226rpx;

				#sub {
					width: 100%;
					height: 79rpx;
					background-color: #fff;
					line-height: 79rpx;
					text-indent: 1em;
					border-bottom: 1rpx solid #e5e5e5;
					border-right: none;
					color: #2f96fe;
					box-sizing: border-box;
					font-size: 30rpx;
				}

				view {
					width: 100%;
					height: 79rpx;
					background-color: #f9f8f8;
					line-height: 79rpx;
					text-indent: 1em;
					border-bottom: 1rpx solid #e5e5e5;
					border-right: 1rpx solid #e5e5e5;
					color: #666666;
					box-sizing: border-box;
					font-size: 30rpx;
				}
			}

			#teacher {
				width: 524rpx;

				.all_teacher {
					width: 100%;
					height: 79rpx;
					background: #fff;
					align-items: center;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e5e5e5;
					text-indent: 1em;
					display: flex;
					justify-content: flex-start;
					color: #666666;
					font-size: 26rpx;

					text {
						&:nth-child(1) {
							font-size: 26rpx;
							margin-left: 8rpx;
							width: 420rpx;
						}

						&:nth-child(2) {
							margin-left: 80rpx;

						}
					}
				}

			}
		}
	}
</style>
